<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootflat-Admin Template</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="favicon_16.ico"/>
    <link rel="bookmark" href="favicon_16.ico"/>
    <!-- site css -->
    <link rel="stylesheet" href="dist/css/site.min.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="dist/js/site.min.js"></script>
  </head>
  <body>
    <!--nav-->
    <nav role="navigation" class="navbar navbar-custom">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button data-target="#bs-content-row-navbar-collapse-5" data-toggle="collapse" class="navbar-toggle" type="button">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Bootflat-Admin</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div id="bs-content-row-navbar-collapse-5" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="getting-started.html">Getting Started</a></li>
              <li class="active"><a href="home-back.html">Documentation</a></li>
              <!-- <li class="disabled"><a href="#">Link</a></li> -->
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Silverbux <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                  <li class="dropdown-header">Setting</li>
                  <li><a href="#">Action</a></li>
                  <li class="divider"></li>
                  <li class="active"><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li class="disabled"><a href="#">Signout</a></li>
                </ul>
              </li>
            </ul>

          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    <!--header-->
    <div class="container-fluid">
    <!--documents-->
        <div class="row row-offcanvas row-offcanvas-left">
          <div class="col-xs-6 col-sm-3 sidebar-offcanvas" role="navigation">
            <ul class="list-group panel">
                <li class="list-group-item"><i class="glyphicon glyphicon-align-justify"></i> <b>SIDE PANEL</b></li>
                <li class="list-group-item"><input type="text" class="form-control search-query" placeholder="Search Something"></li>
                <li class="list-group-item"><a href="home-back.html"><i class="glyphicon glyphicon-home"></i>Dashboard </a></li>
                <li class="list-group-item"><a href="icons.html"><i class="glyphicon glyphicon-certificate"></i>Icons </a></li>
                <li class="list-group-item"><a href="list.html"><i class="glyphicon glyphicon-th-list"></i>Tables and List </a></li>
                <li class="list-group-item"><a href="forms.html"><i class="glyphicon glyphicon-list-alt"></i>Forms</a></li>
                <li class="list-group-item"><a href="alerts.html"><i class="glyphicon glyphicon-bell"></i>Alerts</a></li>
                <li class="list-group-item"><a href="timeline.html" ><i class="glyphicon glyphicon-indent-left"></i>Timeline</a></li>
                <li class="list-group-item"><a href="calendars.html" ><i class="glyphicon glyphicon-calendar"></i>Calendars</a></li>
                <li class="list-group-item"><a href="typography.html" ><i class="glyphicon glyphicon-font"></i>Typography</a></li>
                <li class="list-group-item"><a href="footers.html" ><i class="glyphicon glyphicon-minus"></i>Footers</a></li>
                <li class="list-group-item"><a href="panels.html" ><i class="glyphicon glyphicon-list-alt"></i>Panels</a></li>
                <li class="list-group-item"><a href="navs.html" ><i class="glyphicon glyphicon-th-list"></i>Navs</a></li>
                <li class="list-group-item"><a href="colors.html" ><i class="glyphicon glyphicon-tint"></i>Colors</a></li>
                <li class="list-group-item"><a href="flex.html" ><i class="glyphicon glyphicon-th"></i>Flex</a></li>
                <li class="list-group-item"><a href="login.html" ><i class="glyphicon glyphicon-lock"></i>Login</a></li>
                <li>
                  <a href="#demo3" class="list-group-item " data-toggle="collapse">Item 3  <span class="glyphicon glyphicon-chevron-right"></span></a>
                  <div class="collapse" id="demo3">
                    <a href="#SubMenu1" class="list-group-item" data-toggle="collapse">Subitem 1  <span class="glyphicon glyphicon-chevron-right"></span></a>
                    <div class="collapse list-group-submenu" id="SubMenu1">
                      <a href="#" class="list-group-item">Subitem 1 a</a>
                      <a href="#" class="list-group-item">Subitem 2 b</a>
                      <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse">Subitem 3 c <span class="glyphicon glyphicon-chevron-right"></span></a>
                      <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
                        <a href="#" class="list-group-item">Sub sub item 1</a>
                        <a href="#" class="list-group-item">Sub sub item 2</a>
                      </div>
                      <a href="#" class="list-group-item">Subitem 4 d</a>
                    </div>
                    <a href="javascript:;" class="list-group-item">Subitem 2</a>
                    <a href="javascript:;" class="list-group-item">Subitem 3</a>
                  </div>
                </li>
                <li>
                  <a href="#demo4" class="list-group-item " data-toggle="collapse">Item 4  <span class="glyphicon glyphicon-chevron-right"></span></a>
                    <li class="collapse" id="demo4">
                      <a href="" class="list-group-item">Subitem 1</a>
                      <a href="" class="list-group-item">Subitem 2</a>
                      <a href="" class="list-group-item">Subitem 3</a>
                    </li>
                </li>
              </ul>
          </div>
          <div class="col-xs-12 col-sm-9 content">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><a href="javascript:void(0);" class="toggle-sidebar"><span class="fa fa-angle-double-left" data-toggle="offcanvas" title="Maximize Panel"></span></a> Panel Title</h3>
              </div>
              <div class="panel-body">

                <div class="content-row">
                  <h2 class="content-row-title">Tabs</h2>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="panel">
                        <ul id="myTab1" class="nav nav-tabs nav-justified">
                          <li class="active"><a href="#home1" data-toggle="tab">Home</a></li>
                          <li><a href="#profile1" data-toggle="tab">Profile</a></li>
                          <li class="dropdown">
                                      <a href="#" id="myTabDrop1-1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                                        <li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li>
                          <li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
                        </ul>
                        </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                          <div class="tab-pane fade active in" id="home1">
                            <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                          </div>
                          <div class="tab-pane fade" id="profile1">
                            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p>
                          </div>
                          <div class="tab-pane fade" id="dropdown1-1">
                            <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
                          </div>
                          <div class="tab-pane fade" id="dropdown1-2">
                            <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche ...</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="panel">
                        <div class="tabbable tabs-below">
                          <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="home2">
                              <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                            </div>
                            <div class="tab-pane fade" id="profile2">
                              <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p>
                            </div>
                            <div class="tab-pane fade" id="dropdown2-1">
                              <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
                            </div>
                            <div class="tab-pane fade" id="dropdown2-2">
                              <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche ...</p>
                            </div>
                          </div>
                          <ul id="myTab2" class="nav nav-tabs nav-justified">
                            <li class="active"><a href="#home2" data-toggle="tab">Home</a></li>
                            <li><a href="#profile2" data-toggle="tab">Profile</a></li>
                            <li class="dropdown dropup">
                                      <a href="#" id="myTabDrop2-1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                                        <li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li>
                            <li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
                          </ul>
                          </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="panel">
                        <div class="tabbable tabs-left clearfix">
                          <ul id="myTab1" class="nav nav-tabs">
                            <li class="active"><a href="#home3" data-toggle="tab">Home</a></li>
                            <li><a href="#profile3" data-toggle="tab">Profile</a></li>
                            <li><a href="#myTabDrop3" data-toggle="tab">Dropdown</a></li>
                          </ul>
                          <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="home3">
                              <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                            </div>
                            <div class="tab-pane fade" id="profile3">
                              <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p>
                            </div>
                            <div class="tab-pane fade" id="myTabDrop3">
                              <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="panel">
                        <div class="tabbable tabs-right clearfix">
                          <ul id="myTab1" class="nav nav-tabs">
                            <li class="active"><a href="#home4" data-toggle="tab">Home</a></li>
                            <li><a href="#profile4" data-toggle="tab">Profile</a></li>
                            <li><a href="#myTabDrop4" data-toggle="tab">Dropdown</a></li>
                          </ul>
                          <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="home4">
                              <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
                            </div>
                            <div class="tab-pane fade" id="profile4">
                              <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.</p>
                            </div>
                            <div class="tab-pane fade" id="myTabDrop4">
                              <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone...</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="content-row">
                  <h2 class="content-row-title">Navbars</h2>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="row">
                        <div class="col-md-12">
                          <nav class="navbar navbar-default" role="navigation">
                            <div class="container-fluid">
                              <!-- Brand and toggle get grouped for better mobile display -->
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-content-row-navbar-collapse-1">
                                          <span class="sr-only">Toggle navigation</span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                <a class="navbar-brand" href="#">Bootflat</a>
                              </div>
                              <!-- Collect the nav links, forms, and other content for toggling -->
                              <div class="collapse navbar-collapse" id="bs-content-row-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                  <li class="active"><a href="#">Link</a></li>
                                  <!-- <li class="disabled"><a href="#">Link</a></li> -->
                                  <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                            <ul class="dropdown-menu" role="menu">
                                              <li class="dropdown-header">Setting</li>
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li class="active"><a href="#">Separated link</a></li>
                                  <li class="divider"></li>
                                  <li class="disabled"><a href="#">One more separated link</a></li>
                                </ul>
                                </li>
                                </ul>
                                <form class="navbar-form navbar-right" role="search">
                                  <div class="form-search search-only">
                                    <i class="search-icon glyphicon glyphicon-search"></i>
                                    <input type="text" class="form-control search-query">
                                  </div>
                                </form>
                              </div>
                              <!-- /.navbar-collapse -->
                            </div>
                            <!-- /.container-fluid -->
                          </nav>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <nav class="navbar navbar-default" role="navigation">
                            <div class="container-fluid">
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-content-row-navbar-collapse-2">
                                          <span class="sr-only">Toggle navigation</span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                <a class="navbar-brand" href="#">Bootflat</a>
                              </div>
                              <div class="collapse navbar-collapse" id="bs-content-row-navbar-collapse-2">
                                <p class="navbar-text">Signed in as Mark Otto</p>
                              </div>
                            </div>
                          </nav>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <nav class="navbar navbar-default" role="navigation">
                            <div class="container-fluid">
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-content-row-navbar-collapse-3">
                                          <span class="sr-only">Toggle navigation</span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                <a class="navbar-brand" href="#">Bootflat</a>
                              </div>
                              <div class="collapse navbar-collapse" id="bs-content-row-navbar-collapse-3">
                                <p class="navbar-text navbar-right"><a class="navbar-link" href="">Signed in as Mark Otto</a>
                                </p>
                              </div>
                            </div>
                          </nav>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <nav class="navbar navbar-default" role="navigation">
                            <div class="container-fluid">
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-content-row-navbar-collapse-4">
                                          <span class="sr-only">Toggle navigation</span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                <a class="navbar-brand" href="#">Bootflat</a>
                              </div>
                              <div class="collapse navbar-collapse" id="bs-content-row-navbar-collapse-4">
                                <button type="button" class="btn btn-warning navbar-btn">Sign in</button>
                              </div>
                            </div>
                          </nav>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="row">
                        <div class="col-md-12">
                          <nav class="navbar navbar-inverse" role="navigation">
                            <div class="container-fluid">
                              <!-- Brand and toggle get grouped for better mobile display -->
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-content-row-navbar-collapse-5">
                                          <span class="sr-only">Toggle navigation</span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                <a class="navbar-brand" href="#">Bootflat</a>
                              </div>
                              <!-- Collect the nav links, forms, and other content for toggling -->
                              <div class="collapse navbar-collapse" id="bs-content-row-navbar-collapse-5">
                                <ul class="nav navbar-nav">
                                  <li class="active"><a href="#">Link</a></li>
                                  <!-- <li class="disabled"><a href="#">Link</a></li> -->
                                  <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                            <ul class="dropdown-menu" role="menu">
                                              <li class="dropdown-header">Setting</li>
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li class="active"><a href="#">Separated link</a></li>
                                  <li class="divider"></li>
                                  <li class="disabled"><a href="#">One more separated link</a></li>
                                </ul>
                                </li>
                                </ul>
                                <form class="navbar-form navbar-right" role="search">
                                  <div class="form-search search-only">
                                    <i class="search-icon glyphicon glyphicon-search"></i>
                                    <input type="text" class="form-control search-query">
                                  </div>
                                </form>
                              </div>
                              <!-- /.navbar-collapse -->
                            </div>
                            <!-- /.container-fluid -->
                          </nav>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <nav class="navbar navbar-inverse" role="navigation">
                            <div class="container-fluid">
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-content-row-navbar-collapse-6">
                                          <span class="sr-only">Toggle navigation</span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                <a class="navbar-brand" href="#">Bootflat</a>
                              </div>
                              <div class="collapse navbar-collapse" id="bs-content-row-navbar-collapse-6">
                                <p class="navbar-text">Signed in as Mark Otto</p>
                              </div>
                            </div>
                          </nav>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <nav class="navbar navbar-inverse" role="navigation">
                            <div class="container-fluid">
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-content-row-navbar-collapse-7">
                                          <span class="sr-only">Toggle navigation</span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                <a class="navbar-brand" href="#">Bootflat</a>
                              </div>
                              <div class="collapse navbar-collapse" id="bs-content-row-navbar-collapse-7">
                                <p class="navbar-text navbar-right"><a class="navbar-link" href="">Signed in as Mark Otto</a>
                                </p>
                              </div>
                            </div>
                          </nav>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-12">
                          <nav class="navbar navbar-inverse" role="navigation">
                            <div class="container-fluid">
                              <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-content-row-navbar-collapse-8">
                                          <span class="sr-only">Toggle navigation</span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                          <span class="icon-bar"></span>
                                        </button>
                                <a class="navbar-brand" href="#">Bootflat</a>
                              </div>
                              <div class="collapse navbar-collapse" id="bs-content-row-navbar-collapse-8">
                                <button type="button" class="btn btn-danger navbar-btn">Sign in</button>
                              </div>
                            </div>
                          </nav>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <div class="content-row">
                  <div class="row">
                    <div class="col-md-6">
                      <h2 class="content-row-title">Pills</h2>
                      <div class="row">
                        <div class="col-md-12">
                          <ul class="nav nav-pills nav-justified">
                            <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
                            <li><a href="#">Profile <span class="badge badge-danger">42</span></a></li>
                            <li class="dropdown">
                                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                      <ul class="dropdown-menu">
                                        <li><a href="#">@fat</a></li>
                            <li><a href="#">@mdo</a></li>
                          </ul>
                          </li>
                          </ul>
                        </div>
                        <div class="col-md-12">
                          <ul id="myTab2" class="nav nav-pills nav-stacked">
                            <li class="active"><a href="#">Home <span class="badge pull-right">42</span></a></li>
                            <li><a href="#">Profile</a></li>
                            <li class="dropdown"><a href="#">Messages <span class="badge badge-danger pull-right">20</span></a></li>
                          </ul>
                        </div>
                      </div>
                      <h2 class="content-row-title">Breadcrumbs</h2>
                      <div class="row">
                        <div class="col-md-12">
                          <ol class="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Library</a></li>
                            <li class="active">Data</li>
                          </ol>
                        </div>
                        <div class="col-md-12">
                          <ol class="breadcrumb breadcrumb-arrow">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Library</a></li>
                            <li class="active"><span>Data</span></li>
                          </ol>
                        </div>
                        <div class="col-md-12">
                          <ol class="breadcrumb breadcrumb-arrow">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> Library</a></li>
                            <li class="active"><span><i class="glyphicon glyphicon-calendar"></i> Data</span></li>
                          </ol>
                        </div>
                      </div>
                      <h2 class="content-row-title">Paginations</h2>
                      <div class="row content-row-pagination">
                        <div class="col-md-12">
                          <ul class="pagination">
                            <li class="active"><a href="#">PREV</a></li>
                            <li><a href="#">1</a></li>
                            <li class="active"><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li class="disabled"><a href="#">5</a></li>
                            <li class="active"><a href="#">NEXT</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <h2 class="content-row-title">Progresses</h2>
                      <div class="row content-row-progress">
                        <div class="col-md-12">
                          <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="progress">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                              <span class="sr-only">40% Complete (success)</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="progress">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                              <span class="sr-only">20% Complete</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="progress">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                              <span class="sr-only">60% Complete (warning)</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="progress">
                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                              <span class="sr-only">80% Complete</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="progress progress-striped active">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                              <span class="sr-only">40% Complete (success)</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="progress progress-striped active">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                              <span class="sr-only">20% Complete</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="progress progress-striped active">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                              <span class="sr-only">60% Complete (warning)</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="progress progress-striped active">
                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                              <span class="sr-only">80% Complete (danger)</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <h2 class="content-row-title">Pagers</h2>
                      <div class="row content-row-pagination">
                        <div class="col-md-12">
                          <ul class="pager">
                            <li class="previous"><a href="#">Previous</a></li>
                            <li class="next disabled"><a href="#">Next</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


              </div><!-- panel body -->
            </div>
        </div><!-- content -->
      </div>
    </div>
    <!--footer-->
    <div class="site-footer">
      <div class="container">
        <div class="download">
          <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <a class="btn btn-primary" href="https://github.com/silverbux/bootflat-admin/archive/master.zip">Download Bootflat-Admin</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <!-- SmartAddon BEGIN -->
            <script type="text/javascript">
            (function() {
            var s=document.createElement('script');s.type='text/javascript';s.async = true;
            s.src='http://s1'+'.smartaddon.com/share_addon.js';
            var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
            })();
            </script>

            <a href="http://www.smartaddon.com/?share" title="Share Button" onClick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
            <!-- SmartAddon END -->
        </div>
        <hr class="dashed" />
        <div class="row">
          <div class="col-md-4">
            <h3>Get involved</h3>
            <p>Bootflat is hosted on <a href="https://github.com/silverbux/bootflat-admin" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
          </div>
          <div class="col-md-4">
            <h3>Contribute</h3>
            <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/silverbux/bootflat-admin" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
          </div>
          <div class="col-md-4">
            <h3>Found a bug?</h3>
            <p>Open a <a href="https://github.com/silverbux/bootflat-admin/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
          </div>
        </div>
        <hr class="dashed" />
        <div class="row">
          <div class="col-md-6">
            <h3>Talk to us</h3>
            <ul>
              <li>Tweet us at @YourTwitter&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@yourdomain.com</span></li>
              <li>
                <i class="icon" data-icon="&#xe121"></i>
                <i class="icon" data-icon="&#xe10b"></i>
                <i class="icon" data-icon="&#xe110"></i>
                <i class="icon" data-icon="&#xe10e"></i>
              </li>
            </ul>
          </div>
          <div class="col-md-6">
            <!-- Begin MailChimp Signup Form -->
            
            <div id="mc_embed_signup">
            <h3 style="margin-bottom: 15px;">Newsletter</h3>
            <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
                <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
                <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
            </form>
            </div>
            <!--End mc_embed_signup-->
          </div>
        </div>
        <hr class="dashed" />
        <div class="copyright clearfix">
          <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="home-back.html">Documentation</a>&nbsp;&bull;&nbsp;Free PSD&nbsp;&bull;&nbsp;<a href="colors.html">Color Picker</a></p>
          <p>Code licensed under , documentation under .</p>
        </div>
      </div>
    </div>
  </body>
</html>
